import React from "react";
import PropTypes from "prop-types";
import { List, Modal, TextareaItem } from "@ali/ding-ui";

const Item = List.Item;

// components
import Avatar from "../../components/Avatar";

const HolidayModal = ({ visible, currentAdmin, monthInfo, text, ...props }) => (
  <Modal
    title={<div className="holiday-modal-title">发送给</div>}
    transparent
    maskClosable={false}
    visible={visible}
    footer={[
      {
        text: "不发送",
        onPress: props.hideModal
      },
      {
        text: "发送",
        onPress: props.sendMessage.bind(this, currentAdmin)
      }
    ]}
    platform="ios"
  >
    <div className="holiday-modal-admin" onClick={props.selectAdmin}>
      <List>
        <Item arrow="horizontal">
          {currentAdmin.name ? (
            <Avatar
              className="am-list-thumb-replace"
              avatar={currentAdmin.avatar || ""}
              name={currentAdmin.name || ""}
              size={"1rem"}
              font={"0.4rem"}
            />
          ) : (
            "请选择管理员"
          )}
          {currentAdmin.name}
        </Item>
      </List>
    </div>
    <div className="holiday-modal-file">[链接]{monthInfo}出勤确认</div>

    <TextareaItem
      placeholder="请输入"
      value={text}
      onChange={text => props.onTxtChange(text)}
    />
  </Modal>
);

export default HolidayModal;

HolidayModal.propTypes = {
  text: PropTypes.string,
  visible: PropTypes.bool,
  monthInfo: PropTypes.string,
  onTxtChange: PropTypes.func,
  hideModal: PropTypes.func,
  sendMessage: PropTypes.func,
  currentAdmin: PropTypes.object,
  selectAdmin: PropTypes.func
};
